.task-card {
  background-color: #fff;
  border-radius: 5PX;

  .task-card-title {
    font-size: 12PX;
    padding: 10PX;
    display: flex;
    justify-content: space-between;
    border-bottom: 1PX solid #eee;

    .order-num {
      color: #808080;
    }

    .current-state {
      &.blue {
        color: #2A82E4;
      }

      &.green {
        color: #8EC714;
      }

      &.red {
        color: #B81F1F;
      }

      &.gray {
        color: #808080;
      }
    }
  }

  .task-content {
    padding: 10PX;
    font-size: 12PX;
    height: 80PX;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .room-id {
      font-size: 18PX;
      font-weight: bold;
      display: flex;
      align-items: center;

      .copy {
        width: 18PX;
        height: 20PX;
        margin-left: 10PX;
      }
    }

    .task-role {
      display: flex;
      justify-content: space-between;

      .desc {
        color: gray;
        display: flex;
        align-items: center;
      }
    }
  }

  .task-team {
    border-top: 1px solid #eee;
    padding: 10PX;

    .team-role {
      display: flex;
      font-size: 12PX;
      align-items: center;
      margin-bottom: 10PX;

      &:last-child {
        margin: 0;
      }

      .role-icon {
        flex: 0 0 20PX;
        height: 20PX;
        display: block;
      }

      .role-name {
        margin: 0 10PX;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .role-bean {
        flex: 0 0 55PX;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;

        &.add {
          color: #FFC300;
        }

        &.sub {
          color: #BD0808;
        }
      }

    }

    .btn-group {
      display: flex;
      justify-content: flex-end;

      .btn-box {
        margin-left: 10PX;
      }
    }

  }
}